<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="创建落地页" :visible.sync="dialogVisible" @close="resetForm('addForm')" width="400px">
        <el-form label-position="top" :model="addForm" :hide-required-asterisk='true' ref="addForm" :rules="addPddRules" size="medium">
            <el-form-item label="用户ID" prop="user_id">
                <el-select v-model="addForm.user_id" placeholder="请选择" filterable style="width:100%">
                    <el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <template v-if="addForm.type==3">
                <el-form-item label="橙子建站原链接" prop="link">
                    <el-upload class="link-uploader" drag :show-file-list="false" action :http-request="imgUploadRequest" :before-upload="beforeImgUpload">
                        <div class="pot_content flexbox flexcenter flexjust">
                            <img :src="addForm.link" alt="" v-if="addForm.link" class="link_img">
                            <img src="../../assets/img/pot_picture.svg" alt="" v-else>
                        </div>
                    </el-upload>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="橙子建站原链接" prop="link">
                    <el-input v-model="addForm.link" placeholder="橙子建站原链接"></el-input>
                </el-form-item>
            </template>

            <template v-if="addForm.type==2">
                <el-form-item label="商品goodsSign" prop="url" key="urlPdd">
                    <el-input v-model="addForm.url" placeholder="商品goodsSign"></el-input>
                </el-form-item>
                <el-form-item label="pid" prop="pid" key="pid">
                    <el-input v-model="addForm.pid" placeholder="pid"></el-input>
                </el-form-item>
            </template>
            <template v-else-if="addForm.type==1">
                <el-form-item label="商品推广链接" prop="url" key="url">
                    <el-input v-model="addForm.url" placeholder="商品推广链接"></el-input>
                </el-form-item>
            </template>
            <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="addForm.goods_name" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品ID" prop="goods_id">
                <el-input v-model="addForm.goods_id" placeholder="商品ID"></el-input>
            </el-form-item>
            <!-- <template v-if="addForm.type==3">
                <el-form-item label="店铺ID" prop="appid" key="appid">
                    <el-input v-model="addForm.appid" placeholder="店铺ID"></el-input>
                </el-form-item>
            </template> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm('addForm')" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm('addForm')" :disabled="loading" :loading="loading" class="el-button-width">立即创建</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { clientInfo,clientTos,tosLink } from "../../assets/js/oss";
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            userList: [],
            addForm: {
                type: null,
                goods_id: "",
                goods_name: "",
                url: "",
                user_id: "",
                link: "",
                appid: "",
                pid: "",
            },
            addPddRules: {
                user_id: [
                    {
                        required: true,
                        message: "请选择用户ID",
                        trigger: ["blur", "change"],
                    },
                ],
                link: [
                    {
                        required: true,
                        message: "请输入橙子建站原链接",
                        trigger: ["blur", "change"],
                    },
                ],
                url: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                ],
                goods_name: [
                    {
                        required: true,
                        message: "请输入商品名称",
                        trigger: ["blur", "change"],
                    },
                ],
                goods_id: [
                    {
                        required: true,
                        message: "请输入商品ID",
                        trigger: ["blur", "change"],
                    },
                ],
                pid: [
                    {
                        required: true,
                        message: "请输入pid",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    created() {},
    methods: {
        tipText() {
            let text = "";
            if (this.addForm.type == 1) {
                text = "app链接";
            } else if (this.addForm.type == 2) {
                text = "pid";
            } else if (this.addForm.type == 3) {
                text = "商品链接";
            }
            return text;
        },
        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "cid/Ground/cidGroundAdd",
                        this.addForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$message({
                            message: "添加成功",
                            type: "success",
                        });
                        this.loading = false;
                        this.$emit("getDataList");
                        this.resetForm(formName);
                    }
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        beforeImgUpload(file) {
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            const isIMG =
                testmsg === "jpg" ||
                testmsg === "JPG" ||
                testmsg === "png" ||
                testmsg === "PNG" ||
                testmsg === "jpeg" ||
                testmsg === "JPEG" ||
                testmsg === "gif";
            const isLt2M = file.size / 1024 / 1024 < 10;

            if (!isIMG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 10MB!");
            }
            return isIMG && isLt2M;
        },

        // 图片上传到oss
        async imgUploadRequest(option) {
            try {
                const client = clientInfo;
                const clienttos = clientTos
                let file = option.file;
                let nowData = new Date();
                let year = nowData.getFullYear();
                let month =
                    nowData.getMonth() + 1 < 10
                        ? "0" + (nowData.getMonth() + 1)
                        : nowData.getMonth() + 1;
                let date =
                    nowData.getDate() < 10
                        ? "0" + nowData.getDate()
                        : nowData.getDate();
                let getData = year + "-" + month + "-" + date;
                let relativePath = "cidFiles/" + getData + "/";
                const ret = await clienttos.putObject({
                    key: relativePath+option.file.name,
                    body: file,
                });
                if (ret.statusCode === 200) {
                    let url = tosLink+relativePath+encodeURIComponent(option.file.name)
                    this.addForm.link = url
                    this.$message({
                        message: "上传成功！",
                        type: "success",
                    });
                } else {
                    this.$message.error("上传失败！");
                }
                // let ret = await client.put(relativePath+option.file.name, file);
                // if (ret.res.statusCode === 200) {
                //     this.addForm.link = ret.res.requestUrls[0]
                //     this.$message({
                //         message: "上传成功！",
                //         type: "success",
                //     });
                // } else {
                //     this.$message.error("上传失败！");
                // }
            } catch (error) {
                this.$message.error("上传失败！");
            }
        },

        //获取用户列表
        async getUserList() {
            const { data: res } = await this.$http.post("cid/User/userList");
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.userList = res.data.list;
            }
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.el-form-item {
    margin-bottom: 16px;
}
</style>

<style>
.link-uploader .el-upload-dragger{
    width: 115px;
}
.pot_content{
    width: 100%;
    height: 100%;
}
.link_img{
    display: block;
    width: 100%;
    height: 100%;
}
</style>
